<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/swiper.min.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">

    <title>重庆鼎拓文化传媒</title>
    <style>
        .myswiper{
            width: 100%;
            height: 60%;
            position: absolute;
            top: 11.2%;
            left: 0;
            display: block;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            font-size: 18px;
            background: #fff;
            font-family: 微软雅黑;
            color: #eeeeee;
            /* Center slide text vertically */
            display: flex;
            align-items: center;
            overflow: hidden;
        }


    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9EWveywn6fQpX6GAIPd9xS4Ox2r7R4K8&s=1"></script>
</head>
<body>
    <div class="header" id="header">
        <div class="nav">
            <a href="#"><img src="img/logo.png"></a>
        <ul>
            <li>
                <a href="#header">首页</a>
            </li>

            <li>
                <a href="#myswiper">我们</a>
            </li>

            <li>
                <a href="#content">案例</a>
            </li>

            <li>
                <a href="#cooperation">动态</a>
            </li>

            <li>
                <a href="#myposition">023-67649803</a>
            </li>
        </ul>
        </div>
    </div>
    <!--nav end-->
    <div class="myswiper" id="myswiper">
        <!-- Swiper -->
        <div class="swiper-container">

            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background: yellow"><img src="img/banner.png" ><img src="img/logo.png" style="position: absolute;left: 42%"></div>
                <div class="swiper-slide" style="background: green"><img src="img/banner.png" ><img src="img/logo.png" style="position: absolute;left: 42%"></div>
                <div class="swiper-slide" style="background: red"><img src="img/banner.png" ><img src="img/logo.png" style="position: absolute;left: 42%"></div>

            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>


    <!--swiper end-->


    <!--<div class="space" style="top: 59%;left: 0"><p></p></div>-->

    <!--space end-->
    <div class="content" id="content">
            <div class="line" style="background: #ffffff">
                <ul class="line-one">
                    <li style="background: #aa07c2">
                        <div class="title"></div>
                        <img src="img/a.png" class="p1 ps">
                        <img src="img/pic1.png" class="i1 is">
                        <span class="s1 ss">平面广告</span>

                    </li >

                    <li style="background: #07aec2">
                        <div class="title">

                        </div>
                        <img src="img/b.png" class="p2 ps">
                        <img src="img/pic2.png" class="i2 is">
                        <span class="s2 ss">视频广告</span>
                    </li>

                    <li style="background: #fcd606">
                        <div class="title">

                        </div>
                        <img src="img/c.png" class="p3 ps">
                        <img src="img/pic3.png" class="i3 is">
                        <span class="s3 ss">广告策划</span>
                    </li>
                </ul>

            </div>

            <div class="line" style="background: #ffffff;top: 50%">
                <ul class="line-two">
                    <li style="background: #c20787">
                        <!--<img src="">-->
                        <div class="title">

                        </div>
                        <img src="img/d.png" class="p4 ps">
                        <img src="img/pic4.png" class="i4 is">
                        <span class="s4 ss">品牌创意</span>

                    </li>

                    <li style="background: #f8ae65">
                        <!--<img src="">-->
                        <div class="title">

                        </div>
                        <img src="img/e.png" class="p5 ps">
                        <img src="img/pic5.png" class="i5 is">
                        <span class="s5 ss">营销推广</span>
                    </li>

                    <li style="background: #d607e9">
                        <!--<img src="">-->
                        <div class="title">

                        </div>
                        <img src="img/f.png" class="p6 ps">
                        <img src="img/pic6.png" class="i6 is">
                        <span class="s6 ss">社交媒体</span>
                    </li>
                </ul>
            </div>

    </div>

        <!--content end-->
    <div class="cooperation" id="cooperation">

        <div class="cooperation-title">
            <p>合作伙伴</p>
        </div>

        <div class="cooperation-content">

                <ul class="cooperation-content-line">
                    <li><img src="img/dx.png"></li>
                    <li><img src="img/hw.png"></li>
                    <li><img src="img/gj.png"></li>
                    <li><img src="img/rn.png"></li>
                </ul>

                <ul class="cooperation-content-line" style="top: 50%">
                    <li><img src="img/nh.png"></li>
                    <li><img src="img/ly.png"></li>
                </ul>


        </div>


    </div>

        <!--cooperation end-->

    <div class="myposition" id="myposition">
        <div class="map" id="allmap"></div>

        <div class="mposition">
            <p>联系我们: 023-7649803    Emily：0000000@cn.com</p>
            <p>地      址: 重庆市渝北区新南路168号1栋7-2</p>

        </div>

    </div>
















    <script src="js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container',{
            pagination : '.swiper-pagination',
            loop:true,
            // effect:'cube',
            autoplay : 3000,
        });

                var map = new BMap.Map("allmap");// 创建Map实例
        map.centerAndZoom(new BMap.Point(106.502419,29.608418), 20);  // 初始化地图,设置中心点坐标和地图级别

        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));
        map.setCurrentCity("重庆");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);


        var opts = {
            width : 250,     // 信息窗口宽度
            height: 150,     // 信息窗口高度
            title : "我们的位置："
            // 信息窗口标题
        }

        var infoWindow = new BMap.InfoWindow("鼎拓文化传媒"+"<br>\n"+"联系电话：189-0831-2871"+"<br>\n"+"渝北区新南路184号金科蚂蚁SOHO1栋7-2", opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口


    </script>



</body>
</html>